<template>
  <div class="gl_contentBox gl_heightFull">
    <div class="gl_searchBox gl_mb_15">
      <el-row :gutter="20">
        <el-col :md="6" :lg="4">
          <p>手机号/姓名</p>
          <el-input v-model="Api_GET_EventsManagementClerkOfCourseClerkOfCourseListQO.NameOrMobile" placeholder="请输入手机号/姓名进行查询" size="mini" clearable @change="getCheckPeople()" />
        </el-col>
        <el-col :md="8" :lg="6">
          <el-button style="margin-top:27px" type="primary" size="mini" @click="getCheckPeople()">查询</el-button>
          <el-button style="margin-top:27px" type="warning" size="mini" @click="reset()">重置</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="gl_mb_15">
      <el-button type="primary" size="mini" @click="addPeople()">添加人员</el-button>
    </div>
    <el-table ref="checkTable" v-loading="loading" :data="checkData" size="mini" @selection-change="selectionChange">
      <el-table-column type="selection" />
      <el-table-column prop="mobile" label="手机号" />
      <el-table-column prop="name" label="姓名" />
      <el-table-column label="操作" width="300">
        <template slot-scope="{row, $index}">
          <el-button size="mini" type="text" @click="remove($index, row)">
            <span class="gl_color_warning">删除</span>
          </el-button>
          <el-button size="mini" type="text" @click="edit($index, row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-row class="gl_pt_20" style="text-align: center;">
      <el-pagination
        :current-page="Api_GET_EventsManagementClerkOfCourseClerkOfCourseListQO.Page"
        :page-size="Api_GET_EventsManagementClerkOfCourseClerkOfCourseListQO.MaxResultCount"
        :total="totalPage"
        layout="total,sizes,prev,pager,next,jumper"
        :page-sizes="[10, 20, 50, 100]"
        @size-change="sizeChange"
        @current-change="pageIndexChange"
      />
    </el-row>
    <AddUsers ref="addUsers" :form-data="formData" :title="title" />
  </div>
</template>

<script>
import AddUsers from './addUsers';
import { mapState } from 'vuex';
import { CopyData } from '@/lib';
import {
  Api_GET_EventsManagementClerkOfCourseClerkOfCourseListQO,
  SiSTKWEventsManagementAddClerkOfCouresNameInput,
  SiSTKWEventsManagementUpdateClerkOfCouresNameInput,
  Api_DELETE_EventsManagementClerkOfCourseClerkOfCourseQO
} from '@/lib/form/game/swaggerForm';
import {
  api_GET_EventsManagementClerkOfCourseClerkOfCourseList, // 根据机构查询检录库
  api_DELETE_EventsManagementClerkOfCourseClerkOfCourse // 删除检录库人员
} from '@/extend/api/gameswaggerApi/app.js';
export default {
  name: 'CheckIn',
  components: {
    AddUsers
  },
  data() {
    return {
      loading: false,
      totalPage: 0, // 分页总条目数
      Api_GET_EventsManagementClerkOfCourseClerkOfCourseListQO: new Api_GET_EventsManagementClerkOfCourseClerkOfCourseListQO(),
      SiSTKWEventsManagementAddClerkOfCouresNameInput: new SiSTKWEventsManagementAddClerkOfCouresNameInput(),
      SiSTKWEventsManagementUpdateClerkOfCouresNameInput: new SiSTKWEventsManagementUpdateClerkOfCouresNameInput(),
      Api_DELETE_EventsManagementClerkOfCourseClerkOfCourseQO: new Api_DELETE_EventsManagementClerkOfCourseClerkOfCourseQO(),
      selection: [],
      organizationId: '',
      checkData: [], // 表格数据
      title: '', // 弹窗标题
      formData: {} // 弹窗所用表单
    };
  },
  computed: {
    ...mapState({
      currentUserType: state => state.user.currentUserType,
      DelegationId: state => state.user.rootDelegationId
    })
  },
  watch: {
    'currentUserType': {
      immediate: true,
      deep: true,
      handler(val) {
        if (val && val.organizationUnitId) {
          this.organizationId = val.organizationUnitId;
          this.getCheckPeople();
        }
      }
    }
  },
  methods: {
    // 获取表格数据
    getCheckPeople(page) {
      this.loading = true;
      this.Api_GET_EventsManagementClerkOfCourseClerkOfCourseListQO.OrganizationId = this.organizationId || '';
      this.Api_GET_EventsManagementClerkOfCourseClerkOfCourseListQO.Page = page || 1;
      this.Api_GET_EventsManagementClerkOfCourseClerkOfCourseListQO.SkipCount = (this.Api_GET_EventsManagementClerkOfCourseClerkOfCourseListQO.Page - 1) * this.Api_GET_EventsManagementClerkOfCourseClerkOfCourseListQO.MaxResultCount;
      delete this.Api_GET_EventsManagementClerkOfCourseClerkOfCourseListQO.Status;
      api_GET_EventsManagementClerkOfCourseClerkOfCourseList(this.Api_GET_EventsManagementClerkOfCourseClerkOfCourseListQO).then(res => {
        this.loading = false;
        this.checkData = res.items;
        this.totalPage = res.totalCount;
      }).catch(() => {
        this.loading = false;
      });
    },
    // 重置搜索表单
    reset() {
      this.Api_GET_EventsManagementClerkOfCourseClerkOfCourseListQO = new Api_GET_EventsManagementClerkOfCourseClerkOfCourseListQO();
      this.getCheckPeople();
    },
    // 多选
    selectionChange(val) {
      this.selection = val;
    },
    // 添加人员
    addPeople() {
      this.formData = {};
      this.$refs.addUsers.open();
      this.title = '添加检录人员';
      this.formData = this.SiSTKWEventsManagementAddClerkOfCouresNameInput;
    },
    // 删除
    remove(index, row) {
      var that = this;
      that.$confirm(`您确定要删除 ${row.mobile}？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        that.Api_DELETE_EventsManagementClerkOfCourseClerkOfCourseQO.clerkOfCourseIds = row.id;
        api_DELETE_EventsManagementClerkOfCourseClerkOfCourse(that.Api_DELETE_EventsManagementClerkOfCourseClerkOfCourseQO).then(res => {
          that.getCheckPeople(this.Api_GET_EventsManagementClerkOfCourseClerkOfCourseListQO.Page);
          that.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          that.$message({
            type: 'error',
            message: '删除失败'
          });
        });
      }).catch(() => {
        that.$message({
          type: 'info',
          message: '取消删除'
        });
      });
    },
    // 编辑
    edit(index, row) {
      this.formData = {};
      this.$refs.addUsers.open();
      CopyData(row, this.SiSTKWEventsManagementUpdateClerkOfCouresNameInput);
      this.title = '编辑检录人员';
      this.formData = this.SiSTKWEventsManagementUpdateClerkOfCouresNameInput;
    },
    // 分页
    sizeChange: function(MaxResultCount) {
      this.Api_GET_EventsManagementClerkOfCourseClerkOfCourseListQO.MaxResultCount = MaxResultCount;
      this.getCheckPeople();
    },
    pageIndexChange(currentPage) {
      this.getCheckPeople(currentPage);
    }
  }
};
</script>

<style>

</style>
